﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PASARELA DE PAGOS</title>
    <link href="../../Content/documentos.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/baseCitasOnline.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function escribirClave(valor) {
            $("#CLAVE").val($("#CLAVE").val() + "" + valor);
        }

        function limpiarClave() {
            $("#CLAVE").val("");
        }
    </script>
</head>
<body style="background:#fff;">
    <div>
        <img src="../../Images/bannerBN.jpg" alt="" />
        <h1>PAGOS EN LINEA</h1>
        <table border="0" style="margin-left:auto;margin-right:auto;">
            <tr>
                <td>
                    <table class="formulario" >
                        <tr>
                            <td><label>CONCEPTO</label></td><td><span style="font-weight:bold;">CARNET DE SALUD</span></td>
                        </tr>
                        <tr>
                            <td><label>MONTO</label></td><td><span style="font-weight:bold;">16.00</span></td>
                        </tr>
                        <tr>
                            <td><label>Nº TARJETA</label></td><td><input id="NUMTAR" type="text" value="" style="width:200px;" /></td>
                        </tr>
                        <tr>
                            <td><label>CLAVE</label></td><td><input id="CLAVE" type="password" value="" maxlength="4" /></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td><input type="button" value="7" class="clave" onclick="javascript:escribirClave(this.value);" /></td><td><input type="button" value="8" class="clave" onclick="javascript:escribirClave(this.value);" /></td><td><input type="button" value="9" class="clave" onclick="javascript:escribirClave(this.value);" /></td>
                        </tr>
                        <tr>
                            <td><input type="button" value="4" class="clave" onclick="javascript:escribirClave(this.value);" /></td><td><input type="button" value="5" class="clave" onclick="javascript:escribirClave(this.value);" /></td><td><input type="button" value="6" class="clave" onclick="javascript:escribirClave(this.value);" /></td>
                        </tr>
                        <tr>
                            <td><input type="button" value="1" class="clave" onclick="javascript:escribirClave(this.value);" /></td><td><input type="button" value="2" class="clave" onclick="javascript:escribirClave(this.value);" /></td><td><input type="button" value="3" class="clave" onclick="javascript:escribirClave(this.value);" /></td>
                        </tr>
                        <tr>
                            <td colspan="3"><input type="button" value="Limpiar" style="width:80px;" onclick="javascript:limpiarClave();" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr style="text-align:center;">
                <td colspan="2"><input type="button" value="REALIZAR PAGO" class="botonpasarela" onclick="javascript:pagarBancoNacion();" /></td>
            </tr>
        </table> <br />

        <table id="pnPAGO" class="formulario" style="display:none;">
            <tr>
                <td colspan="2"><span style="font-weight:bold;">PAGO REALIZADO CON EXITO</span></td>
            </tr>
            <tr><td colspan="2">&nbsp;</td></tr>
            <tr>
                <td><label>Nº DE COMPROBANTE</label></td>
                <td><span id="COMPROBANTE" style="font-weight:bold;"></span></td>
            </tr>
            <tr>
                <td><label>FECHA PAGO</label></td>
                <td><span style="font-weight:bold;">@DateTime.Now.ToString("dd/MM/yyyy")</span></td>
            </tr>
        </table>
    </div>
</body>
</html>
<script language="javascript" type="text/javascript">
    var urlPagoBancoNacion = '@Url.Action("pagarComprobante","pagos")';

    function pagarBancoNacion() {
        $.ajax({
            url: urlPagoBancoNacion,
            type: "POST",
            async: true,
            data: "{'NUMTAR':'" + $("#NUMTAR").val() + "', 'CLAVE':'" + $("#CLAVE").val() + "'}",
            contentType: "application/json",
            success: function (result) {
                if (result.resultado != null) {
                    if (result.resultado == "0") {
                        alert("Sus datos son incorrectos verifique y vuelva a intentarlo.");
                    } else {
                        $("#pnPAGO").show();
                        $("#COMPROBANTE").text(result.resultado);
                    }
                } else {
                    alert("Ocurrio un error al intentar realizar el pago.");
                }
            },
            error: msgError
        });
    }
</script>
